<body>
    <div id="div1">
        <input type="text" v-model="name" />
        <br />
        姓名：{{name}}
    </div>

    <script>
        // 获取 input 元素和 div 容器
        const input = document.querySelector('input[v-model="name"]');
        const div = document.getElementById('div1');

        function updateView(value) {
            input.value = value;
            div.innerHTML = div.innerHTML.replace(/\{\{name\}\}/g, value);
        }

        // 初始化模型对象
        const data = {};
        Object.defineProperty(data, 'name', {
            get() {
                return this._name;
            },
            set(value) {
                this._name = value;
                updateView(value);
            },
        });

        // 设置初始值
        data.name = '';

        // 监听 input 输入变化
        input.addEventListener('input', (e) => {
            data.name = e.target.value;
        });

        // 初始化视图
        updateView(data.name);
    </script>
</body>
